<template>
  <div>
    快捷筛选&nbsp;&nbsp; <el-button>今日预抵列表</el-button>&nbsp;&nbsp;
    <el-button >今日预离列表</el-button>&nbsp;&nbsp;
    <el-button >今日抵店列表</el-button>&nbsp;&nbsp;
    <el-button >今日离店列表</el-button><br>
    ----------------------------------------------------------------------------------------
    <br><br>
    住宿状态&nbsp;&nbsp;<el-button  v-model="list.LodgingStatus" @click="getlist()">全部</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">待入住</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">入住中</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">已退房</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">已结算</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">超时未入住</el-button>&nbsp;&nbsp;
    <el-button @click="getlist()">已取消</el-button>&nbsp;&nbsp;<br><br>
    下单时间 &nbsp;&nbsp;
      <el-date-picker
        v-model="list.CheckIntime"
        type="datetimerange"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
      />
      &nbsp;&nbsp;
      <el-button >导出明细</el-button>&nbsp;&nbsp;

      客户姓名&nbsp;&nbsp;<el-input v-model="list.UserName" placeholder="请输入客户姓名" style="width: 200px" />
      <el-button @click="getlist()">查询</el-button><br><br>
      
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="roomNO" label="房号" width="150" />
    <el-table-column prop="roomName" label="房型" width="120" />
    <el-table-column prop="lodgingStatus" label="状态" width="120" >
      <template #default="scoped">
         <span v-if="scoped.row.lodgingStatus == 1">全部</span>
         <span v-else-if="scoped.row.lodgingStatus == 2">待入住</span>
         <span v-else-if="scoped.row.lodgingStatus == 3">入住中</span>
         <span v-else-if="scoped.row.lodgingStatus == 4">已退房</span>
         <span v-else-if="scoped.row.lodgingStatus == 5">已结算</span>
         <span v-else-if="scoped.row.lodgingStatus == 6">超时未入住</span>
         <span v-else-if="scoped.row.lodgingStatus == 7">已取消</span>
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="客人姓名" width="120" />
    <el-table-column prop="checkIntime" label="(预)到店时间" width="120">
      <template #default="scope">
            {{ moment(scope.row.checkIntime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
    </el-table-column>
    <el-table-column prop="checkOuttime" label="(预)离店时间" width="120" >
      <template #default="scoped">
         <span>{{ scoped.row.checkOuttime.substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="userStyle" label="客户类型" width="120">
      <template #default="scoped">
         <span>{{ scoped.row.userStyle == 1 ? "非会员" : "会员"}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作列" min-width="120">
      <template #default="scoped">
        <el-button link type="primary" size="small" @click="deleteds(scoped.row.LodgingId)">删除</el-button>
        <el-button link type="primary" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
        <tr>
            <td>
                <el-pagination
                v-model:current-page="list.PageIndex"
                v-model:page-size="list.PageSize"
                :page-sizes="[6, 8, 10]"
                layout="slot, sizes"
                :total="list.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                >
                共{{ list.totalCount }}条 第{{ list.PageIndex }}页/共{{ list.totalPage }}页
                </el-pagination>
            </td>
            <td>
                <el-pagination
                v-model:current-page="list.PageIndex"
                v-model:page-size="list.PageSize"
                :page-sizes="[6, 8, 10]"
                layout="slot, prev, pager, next"
                :total="list.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                >
                <el-button @click="handleCurrentChange(1)" :disabled="list.totalPage==1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination
                v-model:current-page="list.PageIndex"
                v-model:page-size="list.PageSize"
                :page-sizes="[6, 8, 10]"
                layout="slot, jumper"
                :total="list.totalCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                >
                <el-button @click="handleCurrentChange(list.totalPage)" :disabled="list.PageIndex == list.totalPage">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router=useRouter()


const tableData =ref([])
const list=ref({
  PageIndex:1,
  PageSize:6,
  totalCount:0,
  totalPage:0,
  UserName:"",
  CheckIntime:"",
  CheckOuttime:"",
  LodgingStatus:""
})


//钩子函数
onMounted(()=>{
  getlist()
})

//获取列表
const getlist=()=>{
  axios({
    url:"https://localhost:44392/LodgingShow",
    method:"get",
    params:list.value
  }).then(res=>{
    tableData.value=res.data.data.data;
    list.value.LodgingStatus=res.data.data.lodgingStatus;
    list.value.totalCount=res.data.data.totalCount;
    list.value.totalPage=res.data.data.totalPage;
  })
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  list.value.PageSize = val;
  getlist();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  list.value.PageIndex = val;
  getlist();
}
//删除
const deleteds=(LodgingId:any)=>{
    axios({
      url:"https://localhost:44392/DeleteLodging",
      method:"delete",
      params:{LodgingId}
    }).then(res=>{
       if(res.data.code==200)
       {
         ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getlist()
       }else{
         ElMessage.error('删除失败')
       }
    })
}

// const deleteds=(LodgingId:any)=>{
//   axios.delete("https://localhost:44392/DeleteLodging?LodgingId="+LodgingId).then(res=>{
//     if(res.data.code==200)
//   {
//     ElMessage({
//      message: '删除成功',
//      type: 'success',

//    })
//    getlist()
//   }else{
//     ElMessage.error('删除失败')
//   }
//   })
// }

</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
.line {
  width: 1px;
  background-color: var(--el-border-color);
}
</style>